<template>
  <div class="content" :class="{
    yi_width_d: !show,
    // yi_width_login: $store.state.login,
    yi_width_c: show
  }">
    <!-- <div class="content" :class="{
            yi_width_c: show
        }"> -->
    <div class="right">
      <div class="rigth_1">
        <div class="right_svg">
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"
            class="bi bi-bezier">
            <path fill-rule="evenodd"
              d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5v-1zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z">
            </path>
            <path
              d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5v-1zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z">
            </path>
          </svg>
        </div>
        <span style="
            color: #baafd3;
            font-family: Alata, sans-serif;
            font-size: 30px;
            text-shadow: 5px 5px 3px #3f3f38;
            margin-left: 5px;
          ">
          <strong> SISU Audio Annotation </strong>
        </span>
      </div>

      <div :class="{ hide: screenWidth > 1020 }" class="right_2" @click="show = !show">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div :class="{ hide: !show }" class="center">
      <div class="center_in">
        <span v-for="(item, index) in headNav" :key="item.name" :class="{ active: item.show }"
          @click="handleNav(index, item)">
          {{ item.name }}
        </span>
      </div>
    </div>

    <div class="left">
      <div :class="{ hide: screenWidth < 1020 }" class="head_nav">
        <span v-for="(item, index) in headNav" :key="item.name" :class="{ active: item.show }"
          @click="handleNav(index, item)">
          {{ item.name }}
        </span>
      </div>
      <div v-if="!showLogin" class="head_btn">
        <span @click="handleBtn(1)">Log In/Log out</span>
        <span @click="handleBtn(2)">Sign up</span>
      </div>
      <!-- <div v-else class="head_btn">
                <span @click="handleBtn(3)">User</span>
                <span @click="handleBtn(4)">Account</span>
            </div> -->
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      headNav: [
        {
          name: 'Home',
          show: true,
          path: '/'
        },
        {
          name: 'Tools',
          show: false,
          path: '/tools'
        },
        {
          name: 'Documentation',
          show: false,
          path: '/doc'
        },
        {
          name: 'Help',
          show: false,
          path: '/help'
        }
      ],
      failHeadNav: 1,
      screenWidth: '',
      show: false, // 移动端是否显示导航
      showAddNav: false, // 是否添加新的导航栏
      // login:,
      showLogin: false // 是否登录成功
    }
  },

  computed: {
    listenLogin() {
      if (this.showLogin) {
        this.headNav = [
          {
            name: 'Home',
            show: true,
            path: '/'
          },
          {
            name: 'Tools',
            show: false,
            path: '/tools'
          },
          {
            name: 'Documentation',
            show: false,
            path: '/doc'
          },
          {
            name: 'Help',
            show: false,
            path: '/help'
          },
          {
            name: 'User',
            show: false,
            delete: true
          },
          {
            name: 'Account',
            show: false,
            delete: true
          }
        ]
      } else {
        this.headNav = [
          {
            name: 'Home',
            show: true,
            path: '/'
          },
          {
            name: 'Tools',
            show: false,
            path: '/tools'
          },
          {
            name: 'Documentation',
            show: false,
            path: '/doc'
          },
          {
            name: 'Help',
            show: false,
            path: '/help'
          }
        ]
      }
      return this.$store.state.login
    },
    login: () => {
      return JSON.parse(localStorage.getItem('login')) || null
    },
    getLoginSucInfo() {
      return this.$store.state.loginSucInfo
    },
    listenHelp() {
      return this.$store.state.highlightHelp
    }
  },
  watch: {
    listenLogin: {
      handler(cur, old) {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        this.showAddNav = cur
      },
      immediate: true, //刷新加载 立马触发一次handler
      deep: true // 可以深度检测到 obj 对象的属性值的变化
    },
    getLoginSucInfo: {
      handler(cur, old) {
        if (cur?.email) {
          this.showLogin = true
        } else {
          this.showLogin = false
        }
      },
      immediate: true,
      deep: true
    },
    listenHelp: {
      handler(cur, old) {
        if(cur === '/help') {
          this.handleNav(3)
        } else if(cur === '/doc') {
          this.handleNav(2)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 导航栏切换
    handleNav(index, item) {
      this.$store.commit('handleHighlightHelp', null)
      let a = this.headNav.map((item, id) => {
        if (index === id) {
          // console.log('item', index)
          item.path && this.$router.push({ path: item.path })

          if (index === 4) {
            this.$store.commit('handleUserAcc', {
              index: 0,
              router: this.$router
            })
          } else if (index === 5) {
            this.$store.commit('handleUserAcc', {
              index: 1,
              router: this.$router
            })
          }
          return { ...(item.show = true) }
        } else {
          return { ...(item.show = false) }
        }
      })
    },

    // 登入注册按钮切换
    handleBtn(params) {
      if (params === 1) {
        this.$router.push({ path: '/login' })
      } else if (params === 2) {
        this.$router.push({ path: '/sign' })
      }
    }
  },
  mounted() {
    // 实时监听浏览器窗口大小
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  created() { }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 62px;
  padding: 16px 0px;
  background: #302522;
  color: #fff;

  .right {
    display: flex;
    height: 36px;
    margin-left: 38px;

    .right_svg {
      background: #baafd3;
      padding: 8px 10px;
      border-radius: 6px;
      display: inline-block;
    }
  }

  .left {
    display: flex;
    margin-right: 38px;

    .head_nav {
      span {
        margin-right: 20px;
        color: #a29d9b;
        cursor: pointer;
      }

      .active {
        color: #fff;
      }
    }

    .head_btn {
      span {
        background: #baafd3;
        color: #fff;
        padding: 9px;
        border-radius: 9px;
        cursor: pointer;
      }

      span:nth-child(2) {
        margin-left: 7px;
      }
    }
  }
}

.hide {
  display: none;
  transition: all 2s;
}

.yi_width_c {
  height: 270px !important;
  transition: all 1s;
}

.yi_width_d {
  height: 100px !important;
  transition: all 1s;
}

.yi_width_login {
  height: 40px !important;
}

@media screen and (max-width: 1020px) {
  .content {
    display: flex;
    flex-direction: column;
    height: 100px;
    z-index: 1;

    .right {
      display: flex;
      justify-content: space-between;
      margin-left: 0px !important;
      width: 500px;

      .right_1 {
        display: inline-block !important;

        .right_svg {
          display: inline-block !important;
        }
      }

      .right_2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
          width: 15px;
          height: 5px;
          display: block;
          border-top: 2px solid #a29d9b;
          cursor: pointer;
        }
      }

      .right_2:hover {
        cursor: pointer;
        border: 2px solid #a29d9b;
        padding: 2px 10px 0px 10px;
        border-radius: 5px;
      }
    }

    .center {
      color: #989d9b;

      .center_in {
        display: flex;
        flex-direction: column;

        span {
          cursor: pointer;
          margin-top: 20px;
        }

        .active {
          color: #fff;
        }
      }
    }

    .left {
      margin-right: 0px !important;
      margin-top: 15px;
    }

    .head_btn {
      display: flex;
      justify-content: space-between;
      width: 500px;
    }
  }
}
</style>
